<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="currentPageValue"
      v-model:page-size="pageSizeValue"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      :disabled="disabled"
      :hide-on-single-page="hideOnSinglePage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

interface Props {
  // 当前页码
  currentPage?: number
  // 每页显示条数
  pageSize?: number
  // 总条数
  total: number
  // 每页显示个数选择器的选项设置
  pageSizes?: number[]
  // 组件布局，子组件名用逗号分隔
  layout?: string
  // 是否禁用
  disabled?: boolean
  // 只有一页时是否隐藏
  hideOnSinglePage?: boolean
  // 兼容 useView hook 模式
  useViewState?: any
}

interface Emits {
  // 现代模式的事件
  (e: 'update:currentPage', value: number): void
  (e: 'update:pageSize', value: number): void
  (e: 'size-change', value: number): void
  (e: 'current-change', value: number): void
}

const props = withDefaults(defineProps<Props>(), {
  currentPage: 1,
  pageSize: 10,
  pageSizes: () => [10, 20, 30, 50],
  layout: 'total, prev, pager, next, sizes, jumper',
  disabled: false,
  hideOnSinglePage: false
})

const emit = defineEmits<Emits>()

// 计算属性处理当前页码
const currentPageValue = computed({
  get() {
    if (props.useViewState) {
      return props.useViewState.page || 1
    }
    return props.currentPage
  },
  set(value: number) {
    if (props.useViewState) {
      // useView 模式不需要更新，由内部处理
      return
    }
    emit('update:currentPage', value)
  }
})

// 计算属性处理每页条数
const pageSizeValue = computed({
  get() {
    if (props.useViewState) {
      return props.useViewState.limit || 10
    }
    return props.pageSize
  },
  set(value: number) {
    if (props.useViewState) {
      // useView 模式不需要更新，由内部处理
      return
    }
    emit('update:pageSize', value)
  }
})

// 处理每页条数变化
const handleSizeChange = (value: number) => {
  if (props.useViewState && props.useViewState.pageSizeChangeHandle) {
    // 使用 useView hook 的处理方式
    props.useViewState.pageSizeChangeHandle(value)
  } else {
    // 现代模式
    emit('size-change', value)
  }
}

// 处理当前页变化
const handleCurrentChange = (value: number) => {
  if (props.useViewState && props.useViewState.pageCurrentChangeHandle) {
    // 使用 useView hook 的处理方式
    props.useViewState.pageCurrentChangeHandle(value)
  } else {
    // 现代模式
    emit('current-change', value)
  }
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding: 16px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-container {
    justify-content: center;
  }
}
</style>